light mode
night mode
On This Page

উদাহরণ সহ GET এবং POST Request তৈরি

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax ব্যবহার করে GET এবং POST রিকোয়েস্ট তৈরি করা হয় সার্ভারের সাথে ডেটা আদান-প্রদান করার জন্য। GET রিকোয়েস্ট সাধারণত সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়, আর POST রিকোয়েস্ট ব্যবহার করা হয় ক্লায়েন্ট থেকে সার্ভারে ডেটা সাবমিট করার জন্য। নিচে GET এবং POST রিকোয়েস্টের উদাহরণসহ বিস্তারিত আলোচনা করা হলো।

উদাহরণ ১: GET Request

GET রিকোয়েস্ট ব্যবহার করে আমরা সার্ভার থেকে ডেটা ফেচ করব এবং HTML ডকুমেন্টে তা দেখাবো।

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET Request Example</title>
</head>
<body>
    <h1>Fetch Data Using GET Request</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- GET রিকোয়েস্টের মাধ্যমে প্রাপ্ত ডেটা এখানে দেখানো হবে -->
    </div>

    <script src="get-request.js"></script>
</body>
</html>

JavaScript (get-request.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) { // রিকোয়েস্ট সম্পূর্ণ এবং সফল হয়েছে কিনা তা চেক করা
            var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("data-container").innerHTML = "Error fetching data!";
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

বিস্তারিত ব্যাখ্যা:

  1. XMLHttpRequest অবজেক্ট তৈরি করা: fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।
  2. রিকোয়েস্ট ওপেন করা: xhr.open("GET", "URL", true) দিয়ে একটি GET রিকোয়েস্ট সেট করা হয়েছে।
  3. রেসপন্স হ্যান্ডলিং: onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে রিকোয়েস্ট সফল হয়েছে কিনা চেক করা হয়েছে এবং সফল হলে JSON ডেটা HTML এ দেখানো হয়েছে।
  4. এরর হ্যান্ডলিং: যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

উদাহরণ ২: POST Request

POST রিকোয়েস্ট ব্যবহার করে আমরা ক্লায়েন্ট থেকে ইনপুট ডেটা সার্ভারে পাঠাবো এবং সেই রেসপন্স HTML ডকুমেন্টে দেখাবো।

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request Example</title>
</head>
<body>
    <h1>Send Data Using POST Request</h1>
    <form id="data-form">
        <input type="text" id="title" placeholder="Title" required />
        <textarea id="body" placeholder="Body" required></textarea>
        <button type="button" onclick="sendData()">Submit</button>
    </form>
    <div id="response-container">
        <!-- POST রিকোয়েস্টের মাধ্যমে প্রাপ্ত রেসপন্স এখানে দেখানো হবে -->
    </div>

    <script src="post-request.js"></script>
</body>
</html>

JavaScript (post-request.js):

function sendData() {
    // ইনপুট ফিল্ড থেকে ডেটা সংগ্রহ করা
    var title = document.getElementById("title").value;
    var body = document.getElementById("body").value;

    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // POST রিকোয়েস্ট ওপেন করা
    xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
    
    // কনটেন্ট টাইপ সেট করা (JSON ডেটা পাঠানোর জন্য)
    xhr.setRequestHeader("Content-Type", "application/json");
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 201) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
            var responseData = JSON.parse(xhr.responseText); // JSON রেসপন্স প্রসেস করা
            document.getElementById("response-container").innerHTML = `
                <h3>Response:</h3>
                <p>ID: ${responseData.id}</p>
                <p>Title: ${responseData.title}</p>
                <p>Body: ${responseData.body}</p>
            `;
        } else if (xhr.readyState === 4) {
            // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
            document.getElementById("response-container").innerHTML = "Error sending data!";
        }
    };
    
    // JSON ডেটা তৈরি করা এবং রিকোয়েস্ট পাঠানো
    var data = JSON.stringify({ title: title, body: body });
    xhr.send(data);
}

বিস্তারিত ব্যাখ্যা:

  1. ইনপুট ডেটা সংগ্রহ করা: ইউজারের ইনপুট ডেটা সংগ্রহ করে একটি JSON অবজেক্ট তৈরি করা হয়েছে।
  2. XMLHttpRequest অবজেক্ট তৈরি করা: POST রিকোয়েস্ট পাঠানোর জন্য একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে।
  3. রিকোয়েস্ট ওপেন করা: xhr.open("POST", "URL", true) দিয়ে POST রিকোয়েস্ট সেট করা হয়েছে।
  4. কনটেন্ট টাইপ সেট করা: xhr.setRequestHeader("Content-Type", "application/json") দিয়ে রিকোয়েস্টের কনটেন্ট টাইপ সেট করা হয়েছে।
  5. রেসপন্স হ্যান্ডলিং: রিকোয়েস্ট সফল হলে JSON রেসপন্স প্রসেস করা হয়েছে এবং HTML এ দেখানো হয়েছে।
  6. এরর হ্যান্ডলিং: যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে।

সারসংক্ষেপ:

  • GET Request: সার্ভার থেকে ডেটা ফেচ করার জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটা রিড করার জন্য ব্যবহৃত হয়।
  • POST Request: ক্লায়েন্ট থেকে ডেটা সার্ভারে পাঠানোর জন্য ব্যবহৃত হয়। এটি সাধারণত ডেটা সাবমিশন বা রিসোর্স তৈরি করার জন্য ব্যবহৃত হয়।

এই উদাহরণগুলো অনুসরণ করে GET এবং POST রিকোয়েস্টের মাধ্যমে কিভাবে Ajax ব্যবহার করে ডেটা আদান-প্রদান করা যায় তা সহজে বোঝা যায়।

আরও দেখুন...

On This Page

or

Don't have an account? Register

Promotion